<div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">VeeCMF</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
        <!-- 移动端显示 -->
        <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
            <i class="layui-icon layui-icon-spread-left"></i>
        </li>
        {foreach $layout_menu_list as $key=>$vo }
            {eq name="vo['position']" value="1"}
            {eq name="vo['show']" value="1"}
            {eq name="vo['status']" value="1"}
                {if is_array($promise_menu_id) == true}
                {foreach $promise_menu_id as $idx=>$menu_id }
                    {eq name="$menu_id" value="$vo.id"}
                        <li class="layui-nav-item layui-hide-xs"><a href="{$vo.route}">{$vo.title}</a></li>
                    {/eq}
                {/foreach}
                {else/}
                    <li class="layui-nav-item layui-hide-xs"><a href="{$vo.route}">{$vo.title}</a></li>
                {/if}
            {/eq}
            {/eq}
            {/eq}
        {/foreach}
<!--        <li class="layui-nav-item">-->
<!--            <a href="javascript:;">工具</a>-->
<!--            <dl class="layui-nav-child">-->
<!--                <dd><a href="">尚未开发</a></dd>-->
<!--            </dl>-->
<!--        </li>-->
    </ul>
    <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item layui-hide layui-show-md-inline-block">
            <a href="javascript:;">
                <img src="{$rootData['avatar_src']}" class="layui-nav-img">
                {$rootData['root_name']}
            </a>
            <dl class="layui-nav-child">
<!--                <dd><a href="">个人资料</a></dd>-->
<!--                <dd><a href="">个人设置</a></dd>-->
                <dd><a href="/admin/login/logout">退出登录</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
            <a href="javascript:;">
                <i class="layui-icon layui-icon-more-vertical"></i>
            </a>
        </li>
    </ul>
</div>


<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree" lay-filter="test" id="menu">

        </ul>
    </div>
</div>
<script>
    var res = {$layout_menu_list_json|raw}

    $("#menu").html('')
    layui.use('element', function () {
        element = layui.element;
        //console.log(res)
        let header = '';
        res.forEach( v => {
            header += `
                            <li class="layui-nav-item" id="header_${v.id}"><a href="javascript:;">${v.title}</a></li>
                        `
            var content = '<li class="layui-nav-item">';
            if(v.position == 0 && v.status == 1 && v.show == 1){
                content += '<a href="javascript:;">' + v.title + '</a>';
                content += loadchild(v);
                content += '</li>';
            }
            //这里是添加所有的子菜单
            $("#menu").append(content);
        })
        $('#layuiHeader').html(header)

        element.init();

        // 表头点击事件
        $("#layuiHeader").on("click", 'li', function() {
            // 表头添加样式
            $.each($(this).siblings(), function (i, e) {
                $(e).find("a").removeClass('layui-this')
            });
            $(this).find("a").addClass('layui-this');

            // 侧边栏
            let id = $(this).attr("id").split('_')[1];
            //console.log(id)
            let newArr = res.filter( v => {
                return v.id == id
            })
            // console.log(newArr[0])

            $("#menu").html('');

            newArr.forEach( v => {
                var content = '<li class="layui-nav-item">';
                if(v.position == 0 && v.status == 1 && v.show == 1) {
                    content += '<a href="javascript:;">' + v.title + '</a>';
                    //这里是添加所有的子菜单
                    content += loadchild(v);
                    content += '</li>';
                }
                $("#menu").append(content);
            })
            element.init();

        })
    });


    //组装子菜单的方法
    function loadchild(obj) {
        if (obj == null) {
            return;
        }
        var content = '';
        if (obj.child != null && obj.child.length > 0) {
            content += '<dl class="layui-nav-child">';
        } else {
            content += '<dl>';
        }

        if (obj.child != null && obj.child.length > 0) {
            $.each(obj.child, function (i, note) {
                if(note.position == 0 && note.status == 1 && note.show == 1) {
                    content += '<dd>';
                    content += '<a href="' + note.route + '" onclick="viewClick(' + note.parent_id + ')">' + note.title + '</a>';
                    if (note.child == null) {
                        return;
                    }
                    content += loadchild(note);
                    content += '</dd>';
                }
            });

            content += '</dl>';
        }
        //console.log(content);
        return content;
    }

    // 侧边栏点击事件
    function viewClick(parent_res_id) {
        //console.log(parent_res_id);
        $('#header_' + parent_res_id)
        $.each($('#header' + parent_res_id).siblings(), function (i, e) {
            $(e).find("a").removeClass('layui-this')
        });
        $('#header_' + parent_res_id).find("a").addClass('layui-this');
    }
</script>
